<%--
  Created by IntelliJ IDEA.
  User: 王旭东
  Date: 2024/12/15
  Time: 22:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>宠物领养管理后台</title>
    <!-- 引入css样式文件 -->
    <!-- Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="${pageContext.request.contextPath}/static/css/admin/metisMenu.min.css" rel="stylesheet">
    <!-- DataTables CSS -->
    <link href="${pageContext.request.contextPath}/static/css/admin/dataTables.bootstrap.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="${pageContext.request.contextPath}/static/css/admin/sb-admin-2.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="${pageContext.request.contextPath}/static/css/admin/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/static/css/admin/boot-crm.css" rel="stylesheet" type="text/css">
    <style>
        .panel-heading {
            background-color: #337ab7;
            border-color: #2e6da4;
            font-size: 14px;
            padding-left: 20px;
            height: 36px;
            line-height: 36px;
            color: white;
            position: relative;
            cursor: pointer;
        }

        /*转成手形图标*/
        .panel-heading span {
            position: absolute;
            right: 10px;
            top: 12px;
        }

        .mySize {
            width: 55px;
            height: 65px;
        }
        table{
            border-bottom: 1px solid #ddd !important;
        }
        .panel-heading {
            background-color: #337ab7;
            color: white;
        }
        .panel-body img {
            display: block;
            margin: auto;
        }
        .modal-body {
            max-height: 400px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <!-- 导航栏部分 -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-brand" href="">流浪猫狗管理系统</a>
        </div>
        <!-- 导航栏右侧图标部分 -->
        <!-- 导航栏右侧图标部分 -->
        <ul class="nav navbar-top-links navbar-right">
            <!-- 消息通知 end -->
            <!-- 用户信息和系统设置 start -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="/admin/developing">
                    <i class="fa fa-user fa-fw"></i>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user ">
                    <li>
                        <input type="hidden" id = "currentAdminId" value="${admin.id}">
                    </li>
                    <li><a href="/admin/developing"><i class="fa fa-user fa-fw"></i>
                        管理员：${admin.adminName}</a>
                    </li>
                    <li><a href="/admin/developing"><i class="fa fa-gear fa-fw"></i> 系统设置</a></li>
                    <li class="divider"></li>
                    <li>
                        <a href="${pageContext.request.contextPath}/admin/AdminLogin">
                            <i class="fa fa-sign-out fa-fw"></i>退出登录
                        </a>
                    </li>
                </ul>
            </li>
            <!-- 用户信息和系统设置结束 -->
        </ul> <!-- 左侧显示列表部分 start-->
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <!-- 教学管理  折叠的分组列表 -->
                <div class="panel-heading" id="collapseListGroupHeading3" data-toggle="collapse"
                     data-target="#collapseListGroup3" role="tab">
                    <h4 class="panel-title">
                        后台管理 <span class="fa fa-chevron-up right"></span>
                    </h4>
                </div>
                <div id="collapseListGroup3" class="panel-collapse collapse in" role="tabpanel"
                     aria-labelledby="collapseListGroupHeading3">
                    <ul class="list-group">
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/UserList">
                                <i class="fa fa-flash fa-fw"></i> 用户信息
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/AdminsList">
                                <i class="fa fa-flash fa-fw"></i> 管理员信息
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/PetList">
                                <i class="fa fa-sitemap fa-fw"></i> 宠物管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/AdoptList">
                                <i class="fa fa-sitemap fa-fw"></i> 领养管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/CommentList">
                                <i class="fa fa-sitemap fa-fw"></i> 评论管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/BlogListService">
                                <i class="fa fa-sitemap fa-fw"></i> 团队活动管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/ApplyList">
                                <i class="fa fa-sitemap fa-fw"></i> 志愿者的申请
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/agreeList">
                                <i class="fa fa-sitemap fa-fw"></i> 同意领养列表
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/disagreeList">
                                <i class="fa fa-sitemap fa-fw"></i> 不同意领养列表
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!-- 左侧显示列表部分 end-->

    </nav>
    <!-- pet信息查询部分  start-->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">宠物信息管理</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="panel panel-default">
            <!-- 搜索部分 -->
            <div class="panel-body">
                <form class="form-inline" method="get" action="#">
                    <div class="form-group">
                        <label for="findByPetType">宠物类型</label>
                        <input type="text" class="form-control" id="findByPetType" value="" name="petName">
                    </div>
                    <button type="button" class="btn btn-primary" id="pet_find_modal_btn">查询</button>&nbsp;
                    <input type="button" value="新增" class="btn btn-success" id="pet_add_modal_btn" />
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">用户评论列表</div>
                    <!-- /.panel-heading -->
                    <table class="table table-bordered table-striped" id="pet_table">
                        <thead>
                        <tr>
                            <%--复选框，因为没有做相关功能，就弃用了--%>
                            <%--<th>
                                <input type="checkbox" id="check_all"/>
                            </th>--%>
                            <th>宠物编号</th>
                            <th>宠物名</th>
                            <th>种类</th>
                            <th>性别</th>
                            <th>生日</th>
                            <th>照片</th>
                            <th>领养状态</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach var="pet" items="${petList}">
                            <tr id="pet_${pet.id}">
                                <td>${pet.id}</td>
                                <td>${pet.petName}</td>
                                <td>${pet.petType}</td>
                                <td>${pet.sex}</td>
                                <td>${pet.birthday}</td>
                                <td><img class="mySize" src="${pageContext.request.contextPath}/static/images/animal/${pet.pic}"/></td>
                                <td>
                                    <c:choose>
                                        <c:when test="${pet.state == 0}">
                                            还未被申请领养
                                        </c:when>
                                        <c:when test="${pet.state == 1}">
                                            正在被申请领养
                                        </c:when>
                                        <c:otherwise>
                                            已经被人领养
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td>${pet.remark}</td>
                                <td>
                                    <a href="javascript:void(0);" onclick="editPet(${pet.id})">
                                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                                    </a>
                                    <a href="javascript:void(0);" onclick="deletePet(${pet.id})">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
                                    </a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <div class="row">
                        <!--分页文字信息  -->
                        <div class="col-md-8" id="page_info_area"></div>
                        <!-- 分页条信息 -->
                        <div class="col-md-4" id="page_nav_area"></div>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>
    <!-- 班级列表查询部分  end-->
</div>

<!-- 修改宠物信息的模态框 -->
<div class="modal fade" id="petEditModal" tabindex="-1" role="dialog" aria-labelledby="petEditModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="petEditForm" action="${pageContext.request.contextPath}/admin/PetEdit" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="关闭"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="petEditModalLabel">修改宠物信息</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="edit_petId">
                    <div class="form-group">
                        <label for="edit_petName" class="control-label">宠物名:</label>
                        <input type="text" class="form-control" id="edit_petName" name="petName">
                    </div>
                    <div class="form-group">
                        <label for="edit_petType" class="control-label">种类:</label>
                        <input type="text" class="form-control" id="edit_petType" name="petType">
                    </div>
                    <div class="form-group">
                        <label for="edit_sex" class="control-label">性别:</label>
                        <select class="form-control" id="edit_sex" name="sex">
                            <option value="雄性">雄性</option>
                            <option value="雌性">雌性</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit_birthday" class="control-label">生日:</label>
                        <input type="date" class="form-control" id="edit_birthday" name="birthday">
                    </div>
                    <div class="form-group">
                        <label for="edit_pic" class="control-label">照片:</label>
                        <input type="text" class="form-control" id="edit_pic" name="pic">
                    </div>
                    <div class="form-group">
                        <label for="edit_state" class="control-label">领养状态:</label>
                        <select class="form-control" id="edit_state" name="state">
                            <option value="0">还未被申请领养</option>
                            <option value="1">正在被申请领养</option>
                            <option value="2">已经被领养</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit_remark" class="control-label">备注:</label>
                        <textarea class="form-control" id="edit_remark" name="remark"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 查询结果的模态框 -->
<div class="modal fade" id="petSearchResultModal" tabindex="-1" role="dialog" aria-labelledby="petSearchResultModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="petSearchResultModalLabel">查询结果</h4>
            </div>
            <div class="modal-body">
                <div id="petSearchResult"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加宠物信息的模态框 -->
<div class="modal fade" id="petAddModal" tabindex="-1" role="dialog" aria-labelledby="petAddModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="petAddForm" action="${pageContext.request.contextPath}/admin/PetAdd" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="关闭"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="petAddModalLabel">添加宠物信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="add_petName" class="control-label">宠物名:</label>
                        <input type="text" class="form-control" id="add_petName" name="petName">
                    </div>
                    <div class="form-group">
                        <label for="add_petType" class="control-label">种类:</label>
                        <input type="text" class="form-control" id="add_petType" name="petType">
                    </div>
                    <div class="form-group">
                        <label for="add_sex" class="control-label">性别:</label>
                        <select class="form-control" id="add_sex" name="sex">
                            <option value="雄性">雄性</option>
                            <option value="雌性">雌性</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="add_birthday" class="control-label">生日:</label>
                        <input type="date" class="form-control" id="add_birthday" name="birthday">
                    </div>
                    <div class="form-group">
                        <label for="add_pic" class="control-label">照片:</label>
                        <input type="text" class="form-control" id="add_pic" name="pic">
                    </div>
                    <div class="form-group">
                        <label for="add_state" class="control-label">领养状态:</label>
                        <select class="form-control" id="add_state" name="state">
                            <option value="0">还未被申请领养</option>
                            <option value="1">正在被申请领养</option>
                            <option value="2">已经被领养</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="add_remark" class="control-label">备注:</label>
                        <textarea class="form-control" id="add_remark" name="remark"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 引入js文件 -->
<!-- jQuery -->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="${pageContext.request.contextPath}/static/js/admin/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="${pageContext.request.contextPath}/static/js/admin/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/dataTables.bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="${pageContext.request.contextPath}/static/js/admin/sb-admin-2.js"></script>
<!-- 编写js代码 -->
<script>

    // 删除函数
    function deletePet(id) {
        if (confirm("确定要删除这只宠物吗？")) {
            var form = document.createElement("form");
            form.method = "POST";
            form.action = "${pageContext.request.contextPath}/admin/PetDelete";

            var hiddenField = document.createElement("input");
            hiddenField.type = "hidden";
            hiddenField.name = "id";
            hiddenField.value = id;
            form.appendChild(hiddenField);

            document.body.appendChild(form);
            form.submit();
        }
    }
    // 修改函数
    function editPet(id) {
        // 获取当前行的数据
        var row = $("#pet_table tr[id='pet_" + id + "']");
        var petName = row.find("td:eq(1)").text();
        var petType = row.find("td:eq(2)").text();
        var sex = row.find("td:eq(3)").text();
        var birthday = row.find("td:eq(4)").text();
        var pic = row.find("td:eq(5) img").attr("src");
        var state = row.find("td:eq(6)").text();
        var remark = row.find("td:eq(7)").text();

        // 填充模态框
        $("#edit_petId").val(id);
        $("#edit_petName").val(petName);
        $("#edit_petType").val(petType);
        $("#edit_sex").val(sex);
        $("#edit_birthday").val(birthday);

        // 检查 pic 是否存在，如果不存在则提供默认值
        var picValue = pic ? pic.split('/').pop() : 'default.jpg';
        $("#edit_pic").val(picValue);

        // 处理 state 文本到值的映射
        var stateValue = state === '还未被申请领养' ? 0 :
            state === '正在被申请领养' ? 1 : 2;
        $("#edit_state").val(stateValue);
        $("#edit_remark").val(remark);

        // 显示模态框
        $("#petEditModal").modal("show");
    }
// 页面加载完成时执行--查询
    $(document).ready(function() {
        $('#pet_find_modal_btn').click(function(event) {
            event.preventDefault(); // 阻止默认行为

            var petName = $('#findByPetType').val(); // 获取输入的宠物名字

            if (petName.trim() === "") {
                alert("请输入宠物名字");
                return;
            }

            // 发送 AJAX 请求
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/PetFindByName",
                type: "GET",
                data: { petName: petName },
                success: function(response) {
                    // 假设后端返回的是 JSON 格式的宠物列表
                    if (response.length > 0) {
                        var resultHtml = '<div class="row">';
                        $.each(response, function(index, pet) {
                            resultHtml += '<div class="col-md-12">';
                            resultHtml += '<div class="panel panel-default">';
                            resultHtml += '<div class="panel-heading">' + pet.petName + '</div>';
                            resultHtml += '<div class="panel-body">';
                            resultHtml += '<img src="' + pet.pic + '" class="img-responsive" style="max-height: 200px; margin-bottom: 10px;">';
                            resultHtml += '<p><strong>种类：</strong>' + pet.petType + '</p>';
                            resultHtml += '<p><strong>性别：</strong>' + pet.sex + '</p>';
                            resultHtml += '<p><strong>生日：</strong>' + pet.birthday + '</p>';
                            resultHtml += '<p><strong>领养状态：</strong>' + pet.state + '</p>';
                            resultHtml += '<p><strong>备注：</strong>' + pet.remark + '</p>';
                            resultHtml += '</div></div></div>';
                        });
                        resultHtml += '</div>';
                        $('#petSearchResult').html(resultHtml);
                        $('#petSearchResultModal').modal('show');
                    } else {
                        $('#petSearchResult').html('<p>未找到匹配的宠物</p>');
                        $('#petSearchResultModal').modal('show');
                    }
                },
                error: function() {
                    alert("查询失败，请稍后再试");
                }
            });
        });
    });

    // 页面加载完成时执行
    $(document).ready(function() {
        // 新增按钮点击事件
        $('#pet_add_modal_btn').click(function(event) {
            event.preventDefault(); // 阻止默认行为
            $("#petAddModal").modal("show"); // 显示模态框
        });
    });
</script>
</body>
</html>
